<template>
    <div>
        <div class="e-h-400" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: {
            type: [Number, String],
            default: null
        },
        data: {
            type: Array,
            default: []
        },
        series: {
            type: Array,
            default: [
                { type: 'bar' }, 
                { type: 'bar' }
            ]
        },
        title: {
            type: Object,
            default: () => {
                return {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                }
            }
        }
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            legend: {},
            tooltip: {},
            dataset: {
                // source: [
                //     ['product', '2015', '2016', '2017'],
                //     ['Matcha Latte', 43.3, 85.8, 93.7],
                //     ['Milk Tea', 83.1, 73.4, 55.1],
                //     ['Cheese Cocoa', 86.4, 65.2, 82.5],
                //     ['Walnut Brownie', 72.4, 53.9, 39.1]
                // ]
                source: this.data
            },
            xAxis: { type: 'category' },
            yAxis: {},
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: this.series
        };
        option && myChart.setOption(option);
    }
}
</script>

<style lang="scss" scoped></style>